<template>
	<div>
		<h1 class="title">找回密码</h1>
		<el-form v-show="isForget" :model="forgetForm" :rules="forgetRules" status-icon ref="formforget" style="margin-top: 50px; padding:0 50px;" label-width="100px">
			<el-form-item label="邮箱" prop="email" v-if="!isSuccessSend">
				<el-input v-model="forgetForm.email" name="email" placeholder="邮箱" />
		    </el-form-item>
			<el-form-item label="验证码" prop="verifyCode" v-if="!isSuccessSend">
			    <el-input v-model="forgetForm.verifyCode" name="verifyCode" placeholder="验证码"/>
			</el-form-item>
			
			 <el-button type="primary" @click="VerifyCode()" v-if="!isSuccessSend" style="width: 80%; margin-left: 98px;">确定</el-button>
			<el-form-item label="新密码" prop="newPassword" v-if="isSuccessSend">
				<el-input class="input-style" type="password" v-model="forgetForm.newPassword" name="newPassword" placeholder="新密码" />
			</el-form-item>
			<el-form-item label="确认密码" prop="confirmNewPwd" v-if="isSuccessSend">
				<el-input class="input-style" type="password" v-model="forgetForm.confirmNewPwd" name="confirmNewPwd" placeholder="确认新密码" />
			</el-form-item>
			<el-button type="primary" @click="resetPassword()" v-if="isSuccessSend" style="width: 80%; margin-left: 98px;">重置密码</el-button>
			<el-form-item label-width="0">
				<el-link style="position: absolute; right: 0; top: 10px;" @click="sendVerifyCode()" v-if="!isSuccessSend"  :underline='false'>发送验证码</el-link>
				<el-link style="position: absolute; right: 0; top: 50px;" :underline="false"  @click="back">回到登录</el-link>
			</el-form-item>
		</el-form>
	</div>
</template>

<script setup>
	const emits = defineEmits('update:r')
	import { ref,reactive } from 'vue'
	import { post} from '@/plugins/axios';
	function back(){
		emits('update:r','0deg')
	}
	const isForget = ref(true); // 控制显示忘记密码表单
	const isSuccessSend = ref(false); // 控制是否发送验证码成功
	const formforget = ref();
	
	const forgetForm = ref({
	  email: '',
	  verifyCode: '',
	  newPassword: '',
	  confirmNewPwd: ''
	});
	
	const forgetRules = {
	  email: [
	    { required: true, message: '请输入邮箱', trigger: 'blur' },
	    { type: 'email', message: '邮箱格式错误', trigger: 'blur' }
	  ],
	  verifyCode: [
	    { required: true, message: '请输入验证码', trigger: 'blur' }
	  ],
	  newPassword: [
	    { required: true, message: '请输入新密码', trigger: 'blur' },
	    { min: 5, message: '密码长度不能小于5位', trigger: 'blur' }
	  ],
	  confirmNewPwd: [
	    { required: true, message: '请再次输入密码', trigger: 'blur' },
	    { validator: validateConfirmNewPwd, trigger: 'blur' }
	  ]
	};
	
	function sendVerifyCode() {
	  post("/tUser/sendVerificationCode", { email: forgetForm.value.email }, content => {
	    if (content) {
	      ElMessage.success('验证码发送成功');
	    } else {
	      ElMessage.error('验证码发送失败');
	    }
	  })
	}
	function VerifyCode(){
	  post("/tUser/verifyCode", { email: forgetForm.value.email, code: forgetForm.value.verifyCode }, content => {
	    if (content) {
	      ElMessage.success('验证成功');
	      isSuccessSend.value = true;
	    } else {
	      ElMessage.error('验证失败');
	    }
	  },formforget)
	}
	function resetPassword() {
	  post("/tUser/resetPassword", forgetForm.value, content => {
	    if (content) {
	      ElMessage.success('重置密码成功');
	      isSuccessSend.value = false;
	      back()
	    } else {
	      ElMessage.error('重置密码失败');
	    }
	  },formforget)
	}
	
	function validateConfirmNewPwd(rule, value, callback) {
	  if (value !== forgetForm.value.newPassword) {
	    callback(new Error('两次输入的密码不一致'));
	  } else {
	    callback();
	  }
	}
</script>

<style scoped lang="scss">
	.title{
		text-align: center;
		margin-top: 20px;
		letter-spacing: 2rem;
	}
</style>